<template>
	<view>
		<u-picker :itemHeight="50" :visibleItemCount="8" :show="showRegion" :defaultIndex="defaultIndex" keyName="label" confirmColor="#FE5A13" :loading="loading" :columns="columns"
		 @change="changeHandler" @confirm="regionConfirm" @cancel="close"></u-picker>
	</view>
</template>

<script>
	import { getCity } from '@/api/common.js'
	export default {
		name: "RegionPicker",
		props:{
			provinceId:{
				default: ''
			},
			cityId:{
				default: ''
			},
			areaId:{
				default: ''
			}
		},
		created(){
			this.initCity()
		},
		data() {
			return {
				showRegion: false,
				loading: false,
				columns: [],
				defaultIndex:[0, 0, 0],
				lock: false
			};
		},
		watch:{
			async provinceId(val){
				if(val){
					this.columns = []
					this.lock = true
					
					const provice = await getCity({level:2, p_code: ''});
					const proviceIndex = provice.result.findIndex(item => item.code == val)
					this.columns.push(this.formatData(provice.result));
					
					const city = await getCity({level: 3, p_code: this.provinceId});
					const cityIndex = city.result.findIndex(item => item.code == this.cityId)
					this.columns.push(this.formatData(city.result));
					
					const area = await getCity({level: 4, p_code: this.cityId});
					const areaIndex = area.result.findIndex(item => item.code == this.areaId)
					this.columns.push(this.formatData(area.result));
					
					this.defaultIndex = [proviceIndex, cityIndex, areaIndex]
					
					const currentProvice = this.formatData(provice.result)[proviceIndex]
					const currentCity = this.formatData(city.result)[cityIndex]
					const currentArea = this.formatData(area.result)[areaIndex]
					
					this.$emit('regionConfirm', {
						value:[
							{value: currentProvice.value, label: currentProvice.label},
							{value: currentCity.value, label: currentCity.label},
							{value: currentArea.value, label: currentArea.label}
						]
					});
				}
			}
		},
		methods: {
			async initCity(){
				const provice = await getCity({level:2, p_code: ''});
				!this.lock && this.columns.push(this.formatData(provice.result));
				const city = await getCity({level: 3, p_code: provice.result[0].code});
				!this.lock && this.columns.push(this.formatData(city.result));
				const area = await getCity({level: 4, p_code: city.result[0].code});
				!this.lock && this.columns.push(this.formatData(area.result));
			},
			formatData(list){
				return list.map(item => ({label: item.disName, value: item.code, level: item.level}))
			},
			async changeHandler(e){
				if(e.columnIndex === 2) return
				this.loading = true
				//省
				if(e.columnIndex === 0){
					this.defaultIndex = [e.indexs[0], 0, 0]
					const city = await getCity({level: 3, p_code: e.value[0].value});
					this.columns.splice(1, 1, this.formatData(city.result))
					const area = await getCity({level: 4, p_code: city.result[0].code});
					this.columns.splice(2, 1, this.formatData(area.result))
				}
				//市
				else {
					this.defaultIndex= [e.indexs[0], e.indexs[1], 0]
					const area = await getCity({level: 4, p_code: e.value[1].value});
					this.columns.splice(2, 1, this.formatData(area.result))
				}
				
				this.loading = false
			},
			open(){
				this.showRegion = true
			},
			close(){
				this.showRegion = false
			},
			regionConfirm(e) {
				this.close()
				this.$emit('regionConfirm', e)
			}
		}
	}
</script>

<style lang="scss">

</style>